<template>
  <van-image
    class="my_avator"
    :style="{ 'min-width': `${size}px` }"
    :width="size"
    fit="cover"
    :height="size"
    :radius="radius"
    :src="getAvatorUrl"
    @error="errorState = true"
  />
</template>

<script setup lang="ts">
import defaultGroupIcon from '@assets/images/contact/my_groups.png'
import defaultFriendIcon from '@assets/images/contact/my_friends.png'
import { genAvatar } from '@/utils/common'

type AvatarProps = {
  size?: number
  radius?: number
  src?: string
  desc?: string
  isGroup?: boolean
  isNotification?: boolean
}

const emit = defineEmits([])
const props = withDefaults(defineProps<AvatarProps>(), {
  size: 36,
  radius: 6,
  isGroup: false,
  isNotification: false,
})

const errorState = ref(false)

const getErrorUrl = computed(() => {
  if (props.isGroup) {
    return defaultGroupIcon
  }
  return defaultFriendIcon
})

const getAvatorUrl = computed(() => {
  if (errorState.value) {
    return getErrorUrl.value
  }

  if (props.isNotification) {
    return props.src
  }

  if (props.isGroup) {
    return props.src || defaultGroupIcon
  }

  if (props.src) {
    return props.src
  }

  return genAvatar(props.desc ?? '', props.size)
})
</script>

<style lang="scss" scoped></style>
